<template>
  <div class="hd history">
    

    <search-bar :menu="menu" :showsearch="false" :activeitem="activeitem"></search-bar>
    <position style="padding:12px;width:auto;">
      <router-link to="/cloud">云诊室</router-link>
      &gt;
      <router-link to="/cloud_mail">在线支付</router-link>
      &gt;
      <span class="last">选择快递</span>
    </position>
    <div class="mail_content">
      <ul class="layout_list">
        <!--收件人信息-->
        <li>
          <div class="flex flex_vcenter layout_title">
            <span class="vertical_line"></span>
            <h4 class="item_title">收件人信息</h4>
            <span class="el-icon-plus addbtn" @click="newaddress()">新增</span>
          </div>
          <div class="pinkbg" v-show="defaultaddress">
            <div>
              <b class="getname">{{defaultaddress.collectName}}</b>
              <span class="phone">{{defaultaddress.collectPhone}}</span>
            </div>
            <p class="mt10">
              <span>{{defaultaddress.collectProvincial}}</span>&nbsp;
              <span>{{defaultaddress.collectCity}}</span>&nbsp;
              <span>{{defaultaddress.collectArea}}</span>&nbsp;
              <span>{{defaultaddress.collectDetailAdress}}</span>
            </p>
          </div>
        </li>
        <!--确认收件地址-->
        <li>
          <div class="flex flex_vcenter layout_title">
            <span class="vertical_line"></span>
            <h4 class="item_title">确认收件地址</h4>
          </div>
          <ul class="address_list">
            <li v-for="(value,index) in addresslist">
              <el-radio class="radio" v-model="check_address" :label="value.index">
                <span>{{value.collectProvincial}}</span>&nbsp;
                <span>{{value.collectCity}}</span>&nbsp;
                <span>{{value.collectArea}}</span>&nbsp;
                <span>{{value.collectDetailAdress}}</span>&nbsp;
                <span>{{value.collectName}}（收）</span>&nbsp;
                <span>{{value.collectPhone}}</span>
              </el-radio>
              <div class="address_handler">
                <span class="edit_address" @click="edit_address(value)">修改</span>
                <span class="edit_address" @click="delete_address(value)">删除</span>
                <el-tag type="primary" class="ml10" v-show="value.tolerate === '1'">默认地址</el-tag>
              </div>
            </li>
          </ul>
        </li>
        <!--选择快递公司-->
        <li>
          <div class="flex flex_vcenter layout_title">
            <span class="vertical_line"></span>
            <h4 class="item_title">选择快递公司</h4>
          </div>
          <ul class="flex mt20">
            <li class="ml20">
              <div class="company sf" :class="{checkedmail: checkedmail === 'sf'}" @click="checkedmail='sf'">
                <span class="el-icon-check checkicon" v-show="checkedmail === 'sf'"></span>
              </div>
              <p class="text_center">顺丰快递</p>
              <p class="text_center" v-show="checkedmail === 'sf'">
                <span>需支付快递费：</span>
                <span class="t1">￥{{budgetInfo.charge}}</span> <span>元</span>
              </p>
            </li>
            <!-- <li class="ml20">
              <div class="company ems" :class="{checkedmail: checkedmail === 'ems'}" @click="checkedmail='ems'">
                <span class="el-icon-check checkicon" v-show="checkedmail === 'ems'"></span>
              </div>
              <p class="text_center">EMS快递</p>
              <p class="text_center" v-show="checkedmail === 'ems'">
                <span>需支付快递费：</span>
                <span class="t1">￥{{budgetInfo.charge}}</span> <span>元</span>
              </p>
            </li> -->
          </ul>
        </li>
        <!--选择付款方式-->
        <li>
          <div class="flex flex_vcenter layout_title">
            <span class="vertical_line"></span>
            <h4 class="item_title">选择付款方式</h4>
          </div>
          <ul class="pay_methods">
            <li>
              <el-radio v-model="paytype" label="02"> <img src="../../assets/支付宝.png" alt="" class="paylogo"></el-radio>
              <span>推荐有支付宝账户使用</span>
            </li>
            <li>
              <el-radio v-model="paytype" label="03"> <img src="../../assets/微信支付.png" alt="" class="paylogo"></el-radio>
              <span>微信快捷支付</span>
            </li>
          </ul>
        </li>
        <!--备注信息-->
        <li>
          <div class="flex flex_vcenter layout_title">
            <span class="vertical_line"></span>
            <h4 class="item_title">备注信息</h4>
          </div>
          <el-input v-model="comment" placeholder="请输入备注"  class="comment"></el-input>
        </li>

        <li >
          <div class="layout_title"></div>
          <div class="flex flex_center mt20">
            <a href="javascript:;" class="common-main-button" @click="topay()">确 定</a>
          </div>
        </li>
      </ul>
    </div>
    <!--编辑地址对话框-->
    <el-dialog :title="editdialogtitle" :visible.sync="edit_dialog">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="所在地区">
          <city-select @selcity="cityresult" :editcity="editcity"></city-select>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="form.addressDetail"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="收件人姓名">
          <el-input v-model="form.user"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <a href="javascript:;" class="common-main-button" @click="save()">保 存</a>
        <a href="javascript:;" @click="edit_dialog = false" class="common-sub-button">取 消</a>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="tips_dialog" title="快递支付温馨提示">
      <h4>因医院药房发药紧张：</h4>
      <p><span class="t1">周一至周五，</span>  上午<span class="t1">11:30</span>以前支付，当天配药发出；其余订单次日发出。</p>
      <p><span class="t1">周六至周日，</span>  上午<span class="t1">10:30</span>以前之前，当天配药发出，其余订单次日发出。</p>
      <span slot="footer" class="dialog-footer">
        <a href="javascript:;" class="common-main-button" @click="tips_dialog = false">我知道了</a>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Loading from '../../components/Loading'
  import SearchBar from '../../components/SearchBar'
  import Position from '../../components/Position'
  import CitySelect from '../../components/city-select.vue'
  import {CLOUD_MENU, commonAjax, PLATFORM_PREFIX} from '../../api/api'

  export default {
    components: {Loading, SearchBar, Position, CitySelect},
    data () {
      return {
        menu: CLOUD_MENU,
        activeitem: 2,
        mailtype: '01',
        paytype: '02',
        comment: '',
        checkedmail: '',
        check_address: '',
        edit_dialog: false,
        form: {
          cityInfo: {

          },
          addressDetail: '',
          code: '',
          user: '',
          phone: '',
          addrId: ''
        },
        person: JSON.parse(localStorage.person),
        drugPayInfo: JSON.parse(localStorage.drugPayInfo),
        addresslist: [],
        defaultaddress: {},
        action: 'new',
        editcity: {},
        isTrueBudget: false,
        budgetInfo: {},
        tips_dialog: true
      }
    },
    watch: {
      'check_address' (val, oldval) {
        this.setdefault(this.addresslist[val].addrId)
      },
      'checkedmail' (val, oldval) {
        let param = [
          this.person.mpiId,
          this.defaultaddress.provinceCode,
          this.defaultaddress.cityCode,
          this.defaultaddress.areaCode,
          this.drugPayInfo.stickQuantity ? this.drugPayInfo.stickQuantity : '0',
          this.drugPayInfo.boilQuantity ? this.drugPayInfo.boilQuantity : '0',
          this.drugPayInfo.quantity ? this.drugPayInfo.quantity : '0',
          this.drugPayInfo.glassQuantity ? this.drugPayInfo.glassQuantity : '0',
          this.drugPayInfo.averWeight ? this.drugPayInfo.averWeight : '0',
          this.drugPayInfo.totalWeight ? this.drugPayInfo.totalWeight : '0'
        ]
        if (val === 'sf') { // 002
          param.push('002')
        } else if (val === 'ems') { // 001
          param.push('001')
        }
        commonAjax(param, `${PLATFORM_PREFIX}.diagnosisPayTradeService`, 'proExpress').then(res => {
          if (res.data.code === 200) {
            this.isTrueBudget = true
            this.budgetInfo = res.data.body
          } else {
            this.isTrueBudget = false
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        }).catch(res => {
          this.$message({
            message: '连接服务失败',
            type: 'error'
          })
        })
      }
    },
    mounted () {
      this.queryaddresslist()
    },
    methods: {
      topay () {
        let self = this
        if (this.isTrueBudget) {
          this.$router.push({
            path: '/cloud_mail/mailQrcode',
            query: {
              payType: self.paytype,
              mailType: self.checkedmail === 'sf' ? '002' : '001',
              budgetInfo: self.budgetInfo,
              addressInfo: self.defaultaddress,
              mark: self.comment
            }
          })
        } else {
          this.$message({
            message: '快递预决算失败，请重试',
            type: 'error'
          })
        }
      },
      edit_address (addressinfo) { // 修改地址数据赋值
        this.edit_dialog = true
        this.editcity = addressinfo
        this.action = 'edit'
        this.form.addressDetail = addressinfo.collectDetailAdress
        this.form.user = addressinfo.collectName
        this.form.code = addressinfo.postCode
        this.form.phone = addressinfo.collectPhone
        this.form.addrId = addressinfo.addrId
      },
      queryaddresslist () {
        commonAjax([this.person.mpiId], `${PLATFORM_PREFIX}.diagnosisPayTradeService`, 'findPostadressAllByMpiId').then(res => {
          if (res.data.code === 200) {
            this.addresslist = res.data.body
            if (this.addresslist.length !== 0) {
              let isdefault = -1
              for (let i = 0; i < this.addresslist.length; i++) {
                this.addresslist[i].index = i
                if (this.addresslist[i].tolerate === '1') {
                  isdefault = 0
                  this.defaultaddress = this.addresslist[i]
                  this.check_address = i
                }
              }
              if (isdefault === -1) {
                this.defaultaddress = {}
              }
            }
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        }).catch(res => {
          this.$message({
            message: '连接服务失败',
            type: 'error'
          })
        })
      },
      setdefault (addrId) {
        commonAjax([this.person.mpiId, addrId], `${PLATFORM_PREFIX}.diagnosisPayTradeService`, 'updatePostadressAll').then(res => {
          if (res.data.code === 200) {
            this.queryaddresslist()
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        }).catch(res => {
          this.$message({
            message: '连接服务失败',
            type: 'error'
          })
        })
      },
      newaddress () {
        this.edit_dialog = true
        this.action = 'new'
        this.editcity = {}
        this.form.addressDetail = ''
        this.form.user = ''
        this.form.code = ''
        this.form.phone = ''
      },
      cityresult (param) {
        console.log(JSON.stringify(param))
        this.form.cityInfo = param
      },
      save () {
        if (this.action === 'new') { // 新增地址保存
          let param = [{
            mpiId: this.person.mpiId,
            collectName: this.form.user,
            collectPhone: this.form.phone,
            provinceCode: this.form.cityInfo.province.code,
            collectProvincial: this.form.cityInfo.province.name,
            cityCode: this.form.cityInfo.city.code,
            collectCity: this.form.cityInfo.city.name,
            areaCode: this.form.cityInfo.block.code,
            collectArea: this.form.cityInfo.block.name,
            collectDetailAdress: this.form.addressDetail,
            postCode: this.form.code
          }]
          commonAjax(param, `${PLATFORM_PREFIX}.diagnosisPayTradeService`, 'savaPostadress').then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: '新增收件地址成功',
                type: 'success'
              })
              this.edit_dialog = false
              this.queryaddresslist()
            } else {
              this.$message({
                message: res.data.msg,
                type: 'error'
              })
            }
          }).catch(res => {
            this.$message({
              message: '连接服务失败',
              type: 'error'
            })
          })
        } else if (this.action === 'edit') { // 修改地址保存
          let param = [{
            mpiId: this.person.mpiId,
            addrId: this.form.addrId,
            collectName: this.form.user,
            collectPhone: this.form.phone,
            provinceCode: this.form.cityInfo.province.code,
            collectProvincial: this.form.cityInfo.province.name,
            cityCode: this.form.cityInfo.city.code,
            collectCity: this.form.cityInfo.city.name,
            areaCode: this.form.cityInfo.block.code,
            collectArea: this.form.cityInfo.block.name,
            collectDetailAdress: this.form.addressDetail,
            postCode: this.form.code
          }]
          commonAjax(param, `${PLATFORM_PREFIX}.diagnosisPayTradeService`, 'updatePostadress').then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: '修改地址成功',
                type: 'success'
              })
              this.edit_dialog = false
              this.queryaddresslist()
            } else {
              this.$message({
                message: res.data.msg,
                type: 'error'
              })
            }
          }).catch(res => {
            this.$message({
              message: '连接服务失败',
              type: 'error'
            })
          })
        }
      },
      delete_address (addressinfo) { // 删除已有地址
        let param = [[addressinfo.addrId]]
        commonAjax(param, `${PLATFORM_PREFIX}.diagnosisPayTradeService`, 'delPostadressAll').then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: '删除地址成功',
              type: 'success'
            })
            this.queryaddresslist()
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        }).catch(res => {
          this.$message({
            message: '连接服务失败',
            type: 'error'
          })
        })
      }
    },
    computed: {
      editdialogtitle () {
        if (this.action === 'new') {
          return '新增收件地址'
        } else {
          return '修改收件地址'
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .layout_list>li{
    background-color: white;
  }
  .vertical_line{
    width:29px;
    height:15px;
    background-image: url('../../assets/drawable-hdpi/tips_cloud.png');
    background-repeat: no-repeat;
    background-size: 100%;
    margin-right:10px;
  }
  .borderleft{
    border-left:1px solid #efefef;
  }
  .maillogo{
    width:80px;
    height:80px;
  }
  .el-radio{
    display:flex;
    align-items: center;
    margin:0;
  }
  .layout_title{
    font-size:16px;
    margin:0 20px;
    padding:20px 0 10px 0;
    border-bottom:1px solid #efefef;
  }
  .pinkbg{
    background-color:#FFFBF8;
    margin:0 20px;
    padding:10px 20px;
  }
  .page_title{
    padding:10px;
    border-bottom:1px solid #efefef;
    color:#383838;
    font-size:16px;
  }
  .edit_address{
    color:#9E3110;
    cursor: pointer;
  }
  .address_list>li{
    padding:10px 30px;
    display:flex;
    align-items: center;
    justify-content: space-between;
  }
  .address_handler{
    width:200px;
  }
  .company{
    position:relative;
    border:2px solid #efefef;
    width:160px;
    height:80px;
    background-size: 100% 99%;
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .checkedmail{
    border:2px solid #A63C23;
  }
  .checkicon{
    position:absolute;
    top:-15px;
    right:-15px;
    width:30px;
    height:30px;
    border-radius: 50%;
    background-color:#A63C23;
    color:white;
    text-align: center;
    line-height: 30px;
  }
  .sf{
    background-image:url("../../assets/sf.png")
  }
  .ems{
    background-image:url("../../assets/ems.png")
  }
  .pay_methods>li{
    display:flex;
    align-items: center;
    padding:10px 30px;
  }
  .pay_methods>li>span{
    margin-left:10px;
  }
  .comment{
    margin:10px 30px;
    width:50%;
  }
  .getname{
    font-size:16px;
  }
  .ml20{
    margin-left:30px;
  }
  .text_center{
    text-align: center;
  }
  .addbtn{
    padding:3px;
    margin-left:10px;
    color:#9E3110;
    cursor:pointer;
    border-radius:5px;
    font-size:14px;
  }
  .addbtn:hover{
    background-color: #FFFBF8;
  }


</style>
